<template>
  <section class="fieldWrap" @click="clickk">
    <div class="field">
      <label class="fieldKey"><slot name="key">字段名</slot></label>
      <p  v-if="inputs == false" class="fieldVal"><slot name="value">字段值</slot></p>
      <input class="fieldVal" @change="changeContent" v-model="content" v-if="inputs == true" maxlength="50" />
    </div>
  </section>
</template>
<script>
export default {
  props: {
    inputs: {
      default: false
    }
  },
  data () {
    return {
      content: ''
    }
  },
  methods: {
    changeContent(){
      this.$emit('changes', this.content)
    },
    clickk() {
      this.$emit('clickk')
    }
  }
}
</script>
<style lang="less" scoped>
.fieldWrap {
  padding-left: .15rem;
  background: white;
  &:nth-last-of-type(1) {
    .field {
      border-bottom: none!important;
    }
  }
  .field {
    width: 3.6rem;
    border-bottom: .01rem solid #E5E5E5;
    min-height: .44rem;
    display: flex;
    .fieldKey {
      display: block;
      width: .9rem;
      height: .44rem;
      line-height: .44rem;
      font-size: .17rem;
      color: #828282;
    }
    .fieldVal {
      width: 2.6rem;
      min-height: .24rem;
      line-height: .24rem;
      color: #39393D;
      font-size: .17rem;
      padding: .1rem 0;
      word-wrap:break-word;
      border: none;
    }
  }
}

</style>

